<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 指令：directive -->
  <div id="app">
    <!--需求： v-focus 的指令，自动获取焦点 -->
    <input type="text" v-focus>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 1. 全局自定义指令
    // 2. Vue.directive('指令的名称','指令的配置对象')  基本语法
    // 3. 指令的名字在定义时候不需要加v-，在是用的时候才需要加v-
    // Vue.directive('focus', {
    //   // 4. 固定属性：inserted 在使用指令的元素渲染完毕后触发的函数
    //   inserted (el) {
    //     // 5. 这个函数执行了，代表元素渲染完毕，才可以操作元素。
    //     // 6. 最后根据你指令的需求，实现业务逻辑。el 是使用指令的dom元素
    //     // console.log(el)
    //     el.focus()  // dom提供的api用了获取焦点
    //   }
    // })

    const vm = new Vue({
      // 1. 局部自定义指令
      // 2. directives:{ key: value }
      // 3. key是 指令的名称 要求：定义时候不需要加v-，在是用的时候才需要加v-
      // 4. value是 指令的配置对象
      directives: {
        focus: {
          // 5. 固定属性：inserted 在使用指令的元素渲染完毕后触发的函数
          inserted (el) {
            // 6. el 是使用指令的dom元素
            // 7. 最后根据你指令的需求，实现业务逻辑
            el.focus()
          }
        }
      },
      el: '#app'
    })
  </script>
</body>
</html>